<template>
  <div class="consumption-list-container">
    <el-table v-loading="listLoading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        align="center"
        label="ID"
        prop="id"
        show-overflow-tooltip
        width="60px"
      />
      <el-table-column
        align="center"
        label="处理账号ID"
        prop="member_id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="课程ID"
        prop="course_id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="价格"
        prop="price"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="创建时间"
        prop="created_at"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ formatDate(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="备注"
        prop="remark"
        show-overflow-tooltip
      />
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
  import { getConsumptionList } from '@/api/consumption'
  export default {
    name: 'ConsumptionList',
    data() {
      return {
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          query: '',
          status: '',
          pageNo: 1,
          pageSize: 20,
        },
        selectedRows: [],
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const {
          data: { list, page },
        } = await getConsumptionList(this.queryForm)
        this.list = list
        this.total = page.total
        this.listLoading = false
      },
      formatDate(timestamp) {
        const date = new Date(timestamp * 1000);
        const Y = date.getFullYear() + '-';
        const M = (date.getMonth() + 1).toString().padStart(2, '0') + '-';
        const D = date.getDate().toString().padStart(2, '0') + ' ';
        const h = date.getHours().toString().padStart(2, '0') + ':';
        const m = date.getMinutes().toString().padStart(2, '0') + ':';
        const s = date.getSeconds().toString().padStart(2, '0');
        return Y + M + D + h + m + s;
      },
      handleSelectionChange(val) {
        this.selectedRows = val;
      },
      confirmCourses() {
        if (this.selectedRows.length === 0) {
          this.$message.warning('请选择要确认的课程');
          return;
        }
        // 批量确认逻辑
        this.$message.success('批量确认成功');
      }
    },
  }
</script>

<style>
.el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 1 !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
  font-size: 11px !important;
}
</style>
